<template>
    <div style="margin-top: 20px; margin: 50px; margin-right: 100px;">
      <!-- 按钮 -->
  
      <el-row>
        <el-button
          style="float: right"
          type="primary"
          @click="dialogFormVisible = true"
          >+ 新增部门</el-button
        >
      </el-row>
      <br>
      <!-- 数据表格 -->
      <template>
        <el-table
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
        >
          <el-table-column type="index" width="100" label="序号" header-align="center" align="center"> </el-table-column>
          <el-table-column prop="category" label="分类名称" header-align="center" align="center"></el-table-column>
          <el-table-column label="最后操作时间" header-align="center" align="center">
            <template slot-scope="scope">
                {{ scope.row.updateTime ? scope.row.updateTime.replace('T', ' ') : '' }}
            </template>
          </el-table-column>
  
          <el-table-column label="操作" width="420" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="selectById(scope.row.id)"
                >编辑</el-button
              >
  
              <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteById(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
  
      <!-- 新建对话框 -->
  
      <el-dialog title="保存分类" :visible.sync="dialogFormVisible" >
        <el-form :model="dept">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="dept.category" placeholder="请输入分类名称" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import request from '@/request/request.js';

  export default {
    data() {
      return {
        formLabelWidth: "120px",
        dialogFormVisible: false, //控制对话框是否可见
        dept: {
          name: "",
        },
        tableData: [],
      };
    },

    methods: {
      load() {
        request.get("/sort/all").then(res => {
          if (res.code === "0") {
            this.tableData = res.data;
            console.log(this.tableData);
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      selectById(id) {
        request.get("/sort/" + id).then(res => {
          if (res.code === "0") {
            this.dept = res.data;
            this.dialogFormVisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      deleteById(id) {
        this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          request.delete("/sort/delete/" + id).then(res => {
            if (res.code === "0") {
              this.$message.success("删除成功");
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
      add() {
        if (this.dept.id) {
          request.put("/sort/update", this.dept).then(res => {
            if (res.code === "0") {
              this.$message.success("修改成功");
              this.dialogFormVisible = false;
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          request.post("/sort/add", this.dept).then(res => {
            if (res.code === "0") {
              this.$message.success("新增成功");
              this.dialogFormVisible = false;
              this.load();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      },


    },
    created() {
      this.load();
    }
  }
</script>
  <style></style>
  